<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh(true)"></el-button>
				<el-button type="primary" @click="add">新增</el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-form inline v-model="search" label-position="right">
						<el-form-item label="类型">
							<el-select v-model="search.coupon_type" placeholder="请选择" clearable>
								<el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="状态">
							<el-select v-model="search.status" placeholder="请选择" clearable>
								<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="标题">
							<el-input v-model="search.keyWord" placeholder="请输入" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTableGdshop ref="table" tableName="goodsTable" :apiObj="apiObj" stripe remoteSort remoteFilter :params="tableParams" :column="tableColumn">
				<template #num_info="scope">
					{{ scope.row.used_num }} / {{ scope.row.received_num }} /
					{{ scope.row.quantity_issued - scope.row.received_num }}
				</template>
				<template #coupon_info="scope">
					<template v-if="scope.row.coupon_type == 1 || scope.row.coupon_type == 2">
						<span v-if="scope.row.is_threshold">
							订单满 {{ $TOOL.getMoneyByMinute(scope.row.threshold_money) }} 元
						</span>
						<span v-else>无门槛</span>
					</template>
					<template v-if="scope.row.coupon_type == 3 || scope.row.coupon_type == 4">
						<span v-if="scope.row.is_threshold">
							订单满 {{ scope.row.threshold_num }} 件
						</span>
						<span v-else>无门槛</span>
					</template>
					,
					<span v-if="scope.row.coupon_type == 1 || scope.row.coupon_type == 3">
						减 {{ $TOOL.getMoneyByMinute(scope.row.discount_money) }} 元
					</span>
					<span v-if="scope.row.coupon_type == 2 || scope.row.coupon_type == 4">
						打 {{ scope.row.discount_ratio / 1000 }} 折
					</span>
				</template>

				<template #status="scope">
					<div v-if="scope.row.status === 1">
						<el-button
							type="warning"
							plain
							title="上架"
							@click="changeStatus(scope.row)"
						>{{ getStatusText(scope.row.status) }}</el-button
						>
					</div>
					<div v-if="scope.row.status === 2">
						<el-button
							type="success"
							plain
							title="下架"
							@click="changeStatus(scope.row)"
						>{{ getStatusText(scope.row.status) }}</el-button
						>
					</div>
					<div v-if="scope.row.status === 3">{{ getStatusText(scope.row.status) }}</div>
				</template>

				<el-table-column label="操作" fixed="right" align="center" width="140">
					<template #default="scope">
						<el-button type="text" size="mini" @click="toRemark(scope.row)">使用详情</el-button>
						<el-button type="text" size="mini" @click="toEdit(scope.row)">编辑</el-button>
						<el-button type="text" size="mini" :disabled="scope.row.status >= 3" @click="toEnding(scope.row)">结束</el-button>
						<el-button type="text" size="mini" :disabled="scope.row.received_num > 0" @click="toDel(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</scTableGdshop>
		</el-main>

		<edit ref="editpop" @success="editSuccess" />
		<remark ref="remark" @success="editSuccess" />
	</el-container>
</template>

<script>
import Remark from "./remark";
import Edit from "./edit";
import {ElMessageBox} from "element-plus";
export default {
	name: "marketing-coupon",
	components: {Remark, Edit},
	data() {
		return {
			apiObj: this.$API.shop.coupon,
			search: {
				keyWord: '',
				coupon_type: '',
			},
			tableParams: {
				order: 'id desc',
			},
			typeList: [
				{
					value: 1,
					label: '满金额减',
				},
				{
					value: 2,
					label: '满金额折',
				},
				{
					value: 3,
					label: '满件减',
				},
				{
					value: 4,
					label: '满件折',
				},
			],
			statusList: [
				{
					value: 1,
					label: '仓库中',
				},
				{
					value: 2,
					label: '上架中',
				},
				{
					value: 3,
					label: '结束',
				},
			],
			pageTypeArray: [
				{
					label: "首页",
					value: 1
				},
				{
					label: "商品详情",
					value: 2
				},
				{
					label: "我的",
					value: 3
				}
			],
			tableColumn: [
				{
					prop: "title",
					label: "标题"
				},
				{
					prop: "coupon_type",
					label: "类型",
					formatter: (row, column, cellValue) => {
						switch (cellValue) {
							case 1:
								return '满金额减';
							case 2:
								return '满金额折';
							case 3:
								return '满件减';
							case 4:
								return '满件折';
							default:
								return '未知';
						}
					}
				},
				{
					prop: "coupon_info",
					label: "优惠内容",
				},
				{
					prop: "num_info",
					label: "已使用/已领取/剩余",
				},
				{
					prop: "status",
					label: "状态",
					formatter: (row, column, cellValue) => {
						switch (cellValue) {
							case 1:
								return '<span style="color: #eebe77">仓库中</span>';
							case 2:
								return '<span style="color: #95d475">上架中</span>';
							case 3:
								return '<span style="color: #f89898">结束</span>';
							default:
								return '<span style="color: #b1b3b8">未知</span>';
						}
					}
				},
				{
					prop: "create_at",
					label: "创建时间",
					width: 100,
					formatter: (row, column, cellValue) => {
						return this.$TOOL.dateFormat(cellValue * 1000);
					}
				},
			],
		}
	},
	methods: {
		tableRefresh(isClaer = false) {
			if (isClaer === true) {
				this.search.keyWord = '';
			}
			this.$refs.table.refresh();
		},
		//搜索
		upsearch(){
			this.$refs.table.upData(this.search)
		},
		getPageType(val) {
			let type = '';
			this.pageTypeArray.forEach(item => {
				if (item.value == val) {
					type = item.label;
				}
			});
			return type;
		},
		getStatus(val) {
			if (val === 1) {
				return '启用';
			}

			return '禁用';
		},
		add() {
			this.$refs.editpop.open()
		},
		getStatusText(_status) {
			switch (_status) {
				case 3:
					return "结束";
				case 2:
					return "上架中";
				case 1:
					return "仓库中";
				default:
					return "错误";
			}
		},
		changeStatus(_row) {
			let _this = this;
			_this.$confirm("确定要切换《" + _row.title + "》状态吗?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				_this.$API.shop.coupon
					.changeStatus({ id: _row.id })
					.then((res) => {
						if (res.code === 0) {
							_this.$message.success("操作成功");
							_this.tableRefresh();
						} else {
							_this.$message.error(res.message);
						}
					})
					.catch((err) => {
						console.log(err);
					});
			}).catch(() => {

			});
		},
		toEdit(_row) {
			this.$refs.editpop.edit(_row.id, _row.status < 3);
		},
		toRemark(_row) {
			this.$refs.remark.edit(_row.id,_row.status < 3)
		},
		toEnding(_row) {
			ElMessageBox.confirm("确认结束《"+_row.title+"》吗？", "提示", { type: "warning" })
				.then(() => {
					this.$API.shop.coupon
						.ending({ id: _row.id })
						.then((res) => {
							if (res.code === 0) {
								this.$message.success("优惠券已结束");
								this.tableRefresh();
							}
							else {
								this.$message.error(res.message);
							}
						})
						.catch(() => {});
				})
				.catch(() => {});
		},
		toDel(_row) {
			ElMessageBox.confirm("确认删除《"+_row.title+"》吗？", "提示", { type: "warning" })
				.then(() => {
					this.$API.shop.coupon
						.delete({ ids: [_row.id] })
						.then((res) => {
							if (res.code === 0) {
								this.$message.success("删除成功");
								this.tableRefresh();
							}
							else {
								this.$message.error(res.message);
							}
						})
						.catch(() => {});
				})
				.catch(() => {});
		},
		editSuccess(row) {
			console.log(row);
			this.tableRefresh();
		}
	}
}
</script>

<style scoped>
.text-danger{
	color: #f89898;
}
.text-warning{
	color: #eebe77;
}
.text-success{
	color: #95d475;
}
.text-info{
	color: #b1b3b8;
}
.right-panel-search .el-form--inline .el-form-item {
	margin-right: 5px;
	margin-bottom: 0;
}
</style>
